<!--回单详情-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="order-detail-top">
      <div class="order-detail-header">
        <span class="f-l">业务单号：<i>{{datas.BillNo}}</i></span>
      </div>
      <ul class="order-detail-info">
        <li class="displayflex">
          <label>回单时间</label>
          <p class="flex1">{{handlist.HandoverTime | timeshort}}</p>
        </li>
        <li class="displayflex">
          <label>回单人</label>
          <p class="flex1">{{handlist.RPName}}</p>
        </li>
        <li class="displayflex">
          <label>收货地址</label>
          <p class="flex1">{{datas.Province | province}} {{datas.City | city}} {{datas.District | district}} {{datas.Address}}</p>
        </li>
        <li class="displayflex">
          <label>订单数量</label>
          <p class="flex1"><em class="red">{{parseInt(pkgs | 0)}}</em></p>
        </li>
        <li class="displayflex">
          <label>签收数量</label>
          <p class="flex1"><em class="red">{{parseInt(handlist.RecPKGS | 0)}}</em></p>
        </li>
      </ul>
    </div>
    <div class="order-detail-top" v-if="imglist.length >0">
      <div class="order-detail-header">
        <span class="f-l">单据凭证</span>
      </div>
      <ul class="order-detail-img">
        <li v-for="item in imglist" @click="checkImg(item)">
          <div class="order-img-box"><img :src="item | simpleImgUrl"></div>
        </li>
      </ul>
    </div>

    <div class="detail-customs" v-if="handlist.ExpReason">
      <p>差异原因：{{handlist.ExpReason}}</p>
      <p>备注：{{handlist.Memo}}</p>
    </div>

    <!-- 图片start -->
    <prev-img :checkimgs ="checkimg" v-on:clearData="checkimg = ''"></prev-img>
  </div>
</template>

<script>
import prevImg from '@/components/share/previewPic/preview.vue';
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name:'receiptDetail',
  components: {
    appHeader,
    prevImg
  },
  data() {
    return {
      datas: [],
      imglist: '',
      handlist:[],
      checkimg:'',
      pkgs:0,
    }
  },
  created(){
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
      
    })
  },
  methods: {
    getData: function() {
      var self = this;
      self.datas = JSON.parse(sessionStorage.item);
      var userinfo = JSON.parse(localStorage.userinfo);
      var query = {
          TenantGuid: userinfo.TenantGUID,
          BBillGUID: self.datas.Guid,
      };
      this.Ajax.post('newGetGYhandover', query).then(function(resp) {
        if (resp.IsSuccess) {
          if (resp.Datas && resp.Datas.length > 0) {
            //modi by lxf
            //读取收货人和时间
            self.handlist = resp.Datas[0];
            //更改为读取所有数据的HandoverPict值
            var imglista = [],
                picUrl = [];
            for(var i=0; i<resp.Datas.length; i++) { //外层循环逐条读取Datas
              self.pkgs += resp.Datas[i].PKGS | 0;
              picUrl = JSON.parse(resp.Datas[i].HandoverPict).logistics; //把签收记录的签收图转换成JSON数组
              if(!picUrl) return false;
              for(var k=0; k<picUrl.length; k++){  //内层循环逐条读取图片地址
                picUrl[k] = picUrl[k]
                imglista.push(picUrl[k]); //push到数组
              }
            }
            self.imglist = imglista;
            //modi over
          }
        } else {
          self.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    },
    checkImg(value){
      this.checkimg = value;
    }
  }
}
</script>
